<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网络安全态势可视化</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <style>
        body {
            background-color: #212529;
            color: #f8f9fa;
            padding: 20px;
        }

        .card {
            background-color: #343a40;
            margin-bottom: 20px;
        }

        .chart-container {
            position: relative;
            height: 300px;
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1 class="text-center mb-4">网络安全态势可视化</h1>

        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5>网络安全攻击类型分布</h5>
                    </div>
                    <div class="card-body">
                        <div class="chart-container">
                            <canvas id="attackTypeChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5>网络安全告警级别分布</h5>
                    </div>
                    <div class="card-body">
                        <div class="chart-container">
                            <canvas id="alertLevelChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        <h5>网络安全告警时间分布</h5>
                    </div>
                    <div class="card-body">
                        <div class="chart-container">
                            <canvas id="timeSeriesChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="card">
                    <div class="card-header">
                        <h5>网络安全漏洞检测方式</h5>
                    </div>
                    <div class="card-body">
                        <ul class="list-group">
                            <li class="list-group-item bg-dark text-white">静态代码分析(SAST)</li>
                            <li class="list-group-item bg-dark text-white">动态应用安全测试(DAST)</li>
                            <li class="list-group-item bg-dark text-white">交互式应用安全测试(IAST)</li>
                            <li class="list-group-item bg-dark text-white">软件组成分析(SCA)</li>
                            <li class="list-group-item bg-dark text-white">模糊测试(Fuzzing)</li>
                            <li class="list-group-item bg-dark text-white">配置审计</li>
                            <li class="list-group-item bg-dark text-white">渗透测试</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 攻击类型柱状图
        new Chart(
            document.getElementById('attackTypeChart'),
            {
                type: 'bar',
                data: {
                    labels: ['DDoS', '恶意软件', 'SQL注入', 'XSS', '暴力破解'],
                    datasets: [{
                        label: '攻击次数',
                        data: [12, 19, 3, 5, 2],
                        backgroundColor: '#4e73df'
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            position: 'top',
                            labels: {
                                color: '#f8f9fa'
                            }
                        },
                        title: {
                            display: true,
                            text: '网络安全攻击类型分布',
                            color: '#f8f9fa'
                        }
                    },
                    scales: {
                        x: {
                            ticks: {
                                color: '#f8f9fa'
                            },
                            grid: {
                                color: '#495057'
                            }
                        },
                        y: {
                            ticks: {
                                color: '#f8f9fa'
                            },
                            grid: {
                                color: '#495057'
                            }
                        }
                    }
                }
            }
        );

        // 告警级别饼图
        new Chart(
            document.getElementById('alertLevelChart'),
            {
                type: 'doughnut',
                data: {
                    labels: ['高危', '中危', '低危', '信息'],
                    datasets: [{
                        data: [15, 22, 8, 5],
                        backgroundColor: ['#e74a3b', '#f6c23e', '#36b9cc', '#858796']
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            position: 'right',
                            labels: {
                                color: '#f8f9fa'
                            }
                        },
                        title: {
                            display: true,
                            text: '网络安全告警级别分布',
                            color: '#f8f9fa'
                        }
                    }
                }
            }
        );

        // 时间序列折线图
        new Chart(
            document.getElementById('timeSeriesChart'),
            {
                type: 'line',
                data: {
                    labels: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'],
                    datasets: [{
                        label: '告警数量',
                        data: [3, 5, 8, 12, 7, 4],
                        borderColor: '#1cc88a',
                        tension: 0.1
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            labels: {
                                color: '#f8f9fa'
                            }
                        },
                        title: {
                            display: true,
                            text: '网络安全告警时间分布',
                            color: '#f8f9fa'
                        }
                    },
                    scales: {
                        x: {
                            ticks: {
                                color: '#f8f9fa'
                            },
                            grid: {
                                color: '#495057'
                            }
                        },
                        y: {
                            ticks: {
                                color: '#f8f9fa'
                            },
                            grid: {
                                color: '#495057'
                            }
                        }
                    }
                }
            }
        );
    </script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>